<template>
  <div class="favorite">
    <!-- 顶部标题 -->
    <header class="header">
      <div class="title">我的收藏</div>
    </header>

    <!-- 收藏列表 -->
    <div class="favorite-list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-card
          v-for="item in favoriteList"
          :key="item.id"
          :price="item.price"
          :title="item.title"
          :thumb="item.thumb"
          :tag="item.tag"
        >
          <template #tags>
            <van-tag plain type="danger" v-if="item.isHot">热销</van-tag>
          </template>
          <template #footer>
            <van-button size="small" type="danger" @click="onRemoveFavorite(item)">取消收藏</van-button>
            <van-button size="small" type="primary" style="margin-left: 8px" @click="onAddToCart(item)">加入购物车</van-button>
          </template>
        </van-card>
      </van-list>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="activeTab" route>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="shop-o" to="/market">商城</van-tabbar-item>
      <van-tabbar-item icon="like-o" to="/favorite">收藏</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/profile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Toast } from 'vant'

// 底部导航激活标签
const activeTab = ref(2)

// 收藏列表相关
const loading = ref(false)
const finished = ref(false)
const favoriteList = ref([
  {
    id: 1,
    title: '有机西红柿',
    price: '5.99',
    thumb: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
    tag: '特价',
    isHot: true
  },
  {
    id: 2,
    title: '新鲜土豆',
    price: '3.99',
    thumb: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
    tag: '热卖',
    isHot: true
  }
])

// 加载更多
const onLoad = () => {
  // 异步更新数据
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      const item = {
        id: favoriteList.value.length + 1,
        title: `收藏商品${favoriteList.value.length + 1}`,
        price: (Math.random() * 100).toFixed(2),
        thumb: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
        tag: Math.random() > 0.5 ? '特价' : '热卖',
        isHot: Math.random() > 0.5
      }
      favoriteList.value.push(item)
    }
    loading.value = false

    // 数据全部加载完成
    if (favoriteList.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}

// 取消收藏
const onRemoveFavorite = (item) => {
  Toast.success('取消收藏成功')
  const index = favoriteList.value.findIndex(i => i.id === item.id)
  if (index > -1) {
    favoriteList.value.splice(index, 1)
  }
}

// 添加到购物车
const onAddToCart = (item) => {
  Toast.success('添加成功')
}
</script>

<style lang="scss" scoped>
.favorite {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  background-color: #4fc08d;
  color: #fff;

  .title {
    font-size: 18px;
    font-weight: bold;
  }
}

.favorite-list {
  padding: 8px;

  .van-card {
    margin-bottom: 8px;
    background-color: #fff;
  }
}
</style> 